<!--
 * @Description: 设备统计
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-22 14:09:49
 * @LastEditTime: 2021-10-11 09:03:45
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="card-box">
    <div class="head">
      <p class="line-title">
        <i
          class="iconfont icon-caidanguanli"
          style="color: #1890FF; background-color: rgb(230, 247, 255)"
        ></i>
        <span>设备统计</span>
      </p>
    </div>
    <div class="chart-box">
      <div id="neCount"></div>
      <div v-show="sum === 0" class="noval">
        <div class="noval-content">
          <i class="iconfont">&#xe707;</i>
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2';
export default {
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getCount();
    });
  },
  data () {
    return {
      sum: 0,
      chartData: []
    };
  },
  methods: {
    getCount () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/ne/queryNEStatusCount'
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          let arry = [];
          // eslint-disable-next-line guard-for-in
          for (let key in resultBody) {
            switch (key) {
              case 'sum':
                _this.sum = resultBody[key] ? resultBody[key] : 0;
                break;
              case 'popCount':
                arry.push({ item: '汇聚', count: resultBody[key], percent: resultBody[key] });
                break;
              case 'nonPopCount':
                arry.push({ item: '接入', count: resultBody[key], percent: resultBody[key] });
                break;
              case 'onlineCount':
                arry.push({ item: '在线', count: resultBody[key], percent: resultBody[key] });
                break;
              case 'offlineCount':
                arry.push({ item: '离线', count: resultBody[key], percent: resultBody[key] });
                break;
              case 'relateCount':
                arry.push({ item: '已关联', count: resultBody[key], percent: resultBody[key] });
                break;
              case 'unRelateCount':
                arry.push({ item: '未关联', count: resultBody[key], percent: resultBody[key] });
                break;
            }
          }
          _this.chartData = arry;
          _this.chartInit();
        }
      });
    },
    chartInit () {
      const chart = new Chart({
        container: 'neCount',
        autoFit: true,
        height: 400,
      });
      chart.scale('percent', {
        formatter: (val) => {
          val = val + '%';
          return val;
        },
      });
      chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.6,
      });
      chart.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
      });
      chart.data(this.chartData);
      // 辅助文本
      chart.annotation().text({
        position: ['50%', '50%'],
        content: '设备',
        style: {
          fontSize: 16,
          fill: '#333',
          textAlign: 'center',
        },
        offsetY: -20,
      }).text({
        position: ['50%', '50%'],
        content: this.sum,
        style: {
          fontSize: 20,
          fill: '#333',
          textAlign: 'center',
        },
        offsetX: 0,
        offsetY: 20,
      });
      chart.interval().adjust('stack').position('percent').color('item', ['#74cbed', '#6395f9', '#1aaf8b', '#f97474', '#90d879', '#888e98']).label('percent', (percent) => {
        return {
          content: (data) => {
            return `${data.item}: ${data.count}`;
          },
        };
      }).tooltip('item*percent', (item, count) => {
        return {
          name: item,
          value: count + '台',
        };
      });
      chart.render();
    }
  }
};
</script>

<style lang="scss" scoped>
.chart-box {
  position: relative;
  height: 400px;
  overflow: hidden;
  .noval {
    background: #fff;
    width: 100%;
    height: 400px;
    position: relative;
    top: -400px;
    left: 0;
    .noval-content {
      position: absolute;
      top: 40%;
      left: 40%;
      text-align: center;
      i {
        color: #d7d6d6;
        font-size: 40px;
      }
      p {
        color: #999;
        font-size: 13px;
        line-height: 30px;
        margin-top: 10px;
      }
    }
  }
}
</style>